import { default as getComponentRootDom } from "./getComponentRootDom";
import Icon from "@/components/Icon";
import style from "./showMessage.module.less";

/**
 * 父元素需要设置定位！！！
 * 弹出消息
 * @param {String} content 消息内容
 * @param {String} type 消息类型  info  error  success  warn
 * @param {Number} duration 多久后消失
 * @param {HTMLElement} container 容器，消息会显示到该容器的正中；如果不传，则显示到页面正中
 * @param {Function} callback 执行完成后的回调函数
 */
export default function (options = {}) {
	const content = options.content || ""; //消息内容
	const type = options.type || "info"; //消息类型 info普通 error错误 success成功 warn危险
	const container = options.container || document.body; //插入容器
	const duration = options.duration || 2000; //停留时间
	const icon = getComponentRootDom(Icon, { type }); //消息图标

	//创建消息元素
	const div = document.createElement("div");
	div.innerHTML = `<span class="${style.icon}">${icon.outerHTML}</span>${content}`;
	//背景颜色样式名
	const bgColor = style[`message-${type}`];
	div.className = `${style.message} ${bgColor}`;

	// 容器的position是否改动过
	if (options.container) {
		if (getComputedStyle(container).position === "static") {
			container.style.position = "relative";
		}
	}

	//将div插入到指定容器
	container.appendChild(div);

	//浏览器强制渲染div,导致reflow
	div.clientHeight;

	//正常显示效果
	div.style.transform = " translate(-50%, -50%)";
	div.style.opacity = 1;

	//退出效果
	setTimeout(() => {
		div.style.transform = " translate(-50%, -50%) translateY(-25px)";
		div.style.opacity = 0;
		//消失后自动删除
		div.addEventListener(
			"transitionend",
			() => {
				div.remove();
				//运行回调函数
				options.callback && options.callback();
			},
			{ once: true }
		);
	}, duration);
}
